<template>
  <div>
    <div class="row q-col-gutter-md">
      <div class="col-12">
        <q-card
          flat
          bordered
        >
          <q-card-section>
            <h6 class="q-ma-none q-mb-lg">系统基本信息</h6>
            <div class="row q-col-gutter-md q-mb-md">
              <div class="col-md-2 text-right text-blue-grey-5">
                网站名称
              </div>
              <div class="col">
                {{ baseInfo.SiteName}}
              </div>
              <div class="col-md-2 text-right text-blue-grey-5">
                ICP备案号
              </div>
              <div class="col">
                {{ baseInfo.ICPNumber}}
              </div>
            </div>
            <div class="row q-col-gutter-md q-mb-md">
              <div class="col-md-2 text-right text-blue-grey-5">
                网站简介
              </div>
              <div class="col cus-format-textarea">
                {{ baseInfo.Description}}
              </div>
            </div>
            <div class="row q-col-gutter-md q-mb-md">
              <div class="col-md-2 text-right text-blue-grey-5">
                关键词
              </div>
              <div class="col">
                {{ baseInfo.KeyWords}}
              </div>
            </div>
            <div class="row q-col-gutter-md q-mb-md">
              <div class="col-md-2 text-right text-blue-grey-5">
                网站Logo
              </div>
              <div class="col">
                <q-img :src="$utils.defaultImgSrc + baseInfo.Logo" />
              </div>
              <div class="col-md-2 text-right text-blue-grey-5">
                微博二维码
              </div>
              <div class="col">
                <q-img :src="$utils.defaultImgSrc + baseInfo.WeiboQRCode" />
              </div>
              <div class="col-md-2 text-right text-blue-grey-5">
                公众号二维码
              </div>
              <div class="col">
                <q-img :src="$utils.defaultImgSrc + baseInfo.WeixinQRCode" />
              </div>
            </div>
          </q-card-section>
          <q-separator />
          <q-card-actions class="justify-end">
            <q-btn
              flat
              color="white"
              label="编辑"
              class="col-md-2 col-lg-1 bg-primary"
              @click="dialog.editBaseInfo = true"
            />
          </q-card-actions>
        </q-card>
      </div>
    </div>
    <div class="row q-col-gutter-md q-py-md">
      <div class="col col-md-2 col-sm-4">
        <q-btn
          flat
          color="accent"
          stack
          class="full-width bg-grey-4"
          to="Articles/AddArticle"
        >
          <q-icon
            center
            name="mdi-new-box"
            class="mdi-36px q-my-md"
          />
          <div>添加文章</div>
        </q-btn>
      </div>
      <div class="col col-md-2 col-sm-4">
        <q-btn
          flat
          color="accent"
          stack
          class="full-width bg-grey-4"
          to="Products/Products"
        >
          <q-icon
            center
            name="mdi-package-variant-closed"
            class="mdi-36px q-my-md"
          />
          <div>管理产品</div>
        </q-btn>
      </div>
      <div class="col col-md-2 col-sm-4">
        <q-btn
          flat
          color="accent"
          stack
          class="full-width bg-grey-4"
          to="Pictures/Pictures"
        >
          <q-icon
            center
            name="mdi-image-multiple
"
            class="mdi-36px q-my-md"
          />
          <div>图片管理</div>
        </q-btn>
      </div>
      <div class="col col-md-2 col-sm-4">
        <q-btn
          flat
          color="accent"
          stack
          class="full-width bg-grey-4"
          to="QAs/AddQA"
        >
          <q-icon
            center
            name="mdi-comment-plus-outline"
            class="mdi-36px q-my-md"
          />
          <div>添加问答</div>
        </q-btn>
      </div>
      <div class="col col-md-2 col-sm-4">
        <q-btn
          flat
          color="accent"
          stack
          class="full-width bg-grey-4"
          to="Recruits/Recruits"
        >
          <q-icon
            center
            name="mdi-account-multiple-plus"
            class="mdi-36px q-my-md"
          />
          <div>招聘信息</div>
        </q-btn>
      </div>
      <div class="col col-md-2 col-sm-4">
        <q-btn
          flat
          color="accent"
          stack
          class="full-width bg-grey-4"
          to="UpDowns/AddFile"
        >
          <q-icon
            center
            name="mdi-upload-network"
            class="mdi-36px q-my-md"
          />
          <div>上传文档</div>
        </q-btn>
      </div>
    </div>
    <div class="row q-col-gutter-md">
      <div class="col-md-6">
        <q-card
          flat
          bordered
        >
          <q-table
            :data="tableArticles.ContentData"
            :columns="tableArticles.columns"
            :visibleColumns="tableArticles.visibleColumns"
            row-key="index"
            :loading="tableArticles.loading"
            title="最新发布文章"
            flat
            hide-bottom
            hide-header
            wrap-cells
          >
            <template v-slot:loading>
              <q-inner-loading
                showing
                color="primary"
              />
            </template>
          </q-table>
          <q-separator />
          <q-card-actions class="justify-end">
            <q-btn
              flat
              color="white"
              label="管理文章"
              class="col-md-2 col-lg-1 bg-primary"
              to="Articles/Articles"
            />
          </q-card-actions>
        </q-card>
      </div>
      <div class="col-md-6">
        <q-card
          flat
          bordered
        >
          <q-table
            :data="tableProducts.ContentData"
            :columns="tableProducts.columns"
            :visibleColumns="tableProducts.visibleColumns"
            row-key="index"
            :loading="tableProducts.loading"
            title="最新发布产品"
            flat
            hide-bottom
            hide-header
            wrap-cells
          >
            <template v-slot:body-cell-CategoryName="props">
              <q-td
                :props="props"
                class="text-grey-6"
              >
                {{props.row.CategoryName }}
              </q-td>
            </template>
            <template v-slot:loading>
              <q-inner-loading
                showing
                color="primary"
              />
            </template>
          </q-table>
          <q-separator />
          <q-card-actions class="justify-end">
            <q-btn
              flat
              color="white"
              label="添加产品"
              class="col-md-2 col-lg-1 bg-primary"
              to="Products/AddProduct"
            />
          </q-card-actions>
        </q-card>
      </div>
    </div>
    <!-- 对话框-编辑基本信息 -->
    <q-dialog
      v-model="dialog.editBaseInfo"
      persistent
    >
      <q-card style="width: 70vw; max-width: 80vw">
        <q-card-section>
          <div class="q-pb-md text-h6">编辑基本信息</div>
        </q-card-section>
        <q-card-section class="row items-center">
          <q-form
            class="q-gutter-y-md full-width"
            @submit.prevent.stop="editMessage"
          >
            <div class="row q-col-gutter-md">
              <div class="col-6">
                <q-input
                  dense
                  outlined
                  v-model="baseInfo.SiteName"
                  label="网站名称"
                  name="SiteName"
                  :rules="[val => !!val || '此项不能为空']"
                />
              </div>
              <div class="col-6">
                <q-input
                  dense
                  outlined
                  v-model="baseInfo.ICPNumber"
                  label="请填写网站ICP备案号"
                  name="ICPNumber"
                  hint="海外主机网站，不用备案"
                />
              </div>
              <div class="col-12">
                <q-input
                  hide-bottom-space
                  dense
                  type="textarea"
                  autogrow
                  outlined
                  v-model="baseInfo.Description"
                  label="网站简介"
                  name="Description"
                />
              </div>
              <div class="col-12">
                <q-input
                  hide-bottom-space
                  dense
                  type="textarea"
                  autogrow
                  outlined
                  v-model="baseInfo.KeyWords"
                  label="网站关键词"
                  name="KeyWords"
                  hint="以英文逗号（,）分割，用于搜索引擎匹配关键词"
                />
              </div>
              <div class="col-4">
                <q-uploader
                  ref="Logo"
                  flat
                  bordered
                  label="公司logo"
                  accept=".jpg, .png, image/*"
                  max-files="1"
                  auto-upload
                  class="q-mt-md full-width"
                  :factory="uploadIMG"
                  @uploaded="uploadedLogoInfo"
                />
                <q-input
                  class="hidden"
                  outlined
                  dense
                  v-model="baseInfo.Logo"
                  label="公司logo"
                  name="Logo"
                />
              </div>
              <div class="col-4">
                <q-uploader
                  ref="WeiboQRCode"
                  flat
                  bordered
                  label="公司官方微博二维码"
                  accept=".jpg, .png, image/*"
                  max-files="1"
                  auto-upload
                  class="q-mt-md full-width"
                  :factory="uploadIMG"
                  @uploaded="uploadedWeiboQRCodeInfo"
                />
                <q-input
                  class="hidden"
                  outlined
                  dense
                  v-model="baseInfo.WeiboQRCode"
                  label="公司官方微博二维码"
                  name="WeiboQRCode"
                />
              </div>
              <div class="col-4">
                <q-uploader
                  ref="WeixinQRCode"
                  flat
                  bordered
                  label="公司微信公众号二维码"
                  accept=".jpg, .png, image/*"
                  max-files="1"
                  auto-upload
                  class="q-mt-md full-width"
                  :factory="uploadIMG"
                  @uploaded="uploadedWeixinQRCodeInfo"
                />
                <q-input
                  class="hidden"
                  outlined
                  dense
                  v-model="baseInfo.WeixinQRCode"
                  label="公司微信公众号二维码"
                  name="WeixinQRCode"
                />
              </div>
              <div class="col col-md-4">
                <q-img :src="$utils.defaultImgSrc + baseInfo.Logo" />
              </div>
              <div class="col col-md-4">
                <q-img :src="$utils.defaultImgSrc + baseInfo.WeiboQRCode" />
              </div>
              <div class="col col-md-4">
                <q-img :src="$utils.defaultImgSrc + baseInfo.WeixinQRCode" />
              </div>
            </div>
            <q-separator />
            <q-card-actions align="right">
              <q-btn
                flat
                label="取消"
                v-close-popup
              />
              <q-btn
                flat
                label="保存"
                color="primary"
                v-close-popup
                type="submit"
              />
            </q-card-actions>

          </q-form>
        </q-card-section>
      </q-card>
    </q-dialog>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  name: 'PageDashboard',
  components: {},
  props: {},
  data () {
    return {
      baseInfo: {},
      tableArticles: {
        // 分割线模式可选值：horizontal (default)', 'vertical', 'cell', 'none'
        separator: 'horizontal',
        loading: true,
        // 可见列
        visibleColumns: [ 'ArticleName', 'PublicDate'],
        columns: [
          { name: 'ArticleName', align: 'left', label: '文章标题', field: 'ArticleName' },
          { name: 'PublicDate', align: 'center', label: '发布日期', field: 'PublicDate', style: 'min-width:160px' },
        ],
        ContentData: [],
        selected: [],
      },
      tableProducts: {
        // 分割线模式可选值：horizontal (default)', 'vertical', 'cell', 'none'
        separator: 'horizontal',
        loading: true,
        // 可见列
        visibleColumns: [ 'CategoryName', 'ProductName', 'PublicDate'],
        columns: [
          { name: 'CategoryName', align: 'left', label: '二级分类', field: 'CategoryName' },
          { name: 'ProductName', align: 'left', label: '产品名称', field: 'ProductName' },
          { name: 'PublicDate', align: 'center', label: '发布日期', field: 'PublicDate' },
        ],
        ContentData: [],
        selected: [],
      },
      // ---------- 对话框
      dialog: {
        editBaseInfo: false,
      },
    }
  },
  methods: {
    // 获取基本信息
    getBaseInfo() {
      this.$api.BaseInfoParams('', 'get').then (result => {
        // console.log(result)
        this.baseInfo = result
      }).catch (err => {
        switch (err.response.status) {
          case 401:
            this.unauthorized()
            break
        }
        console.log(err)
      })
    },

    // 获取文章最新列表
    getArticlesList() {
      const _params = {
        pageIndex:1,
        pageSize:5,
        ColumnID:-1
      }
      this.$api.ArticlesParams('', 'get', _params).then (result => {
        // console.log(result)
        this.tableArticles.ContentData = result.data
        // 格式化日期，去掉时间
        this.tableArticles.ContentData.forEach((row, index) => {
          row.PublicDate = this.$utils.initDate(row.PublicDate, 0, 10)
        })
        // 关闭加载动画
        this.tableArticles.loading = false
      }).catch (err => {
        switch (err.response.status) {
          case 401:
            this.unauthorized()
            break
        }
        console.log(err)
      })
    },

    // 获取产品列表
    getProductsList() {
      const _params = {
        pageIndex:1,
        pageSize:5,
        ColumnID:-1
      }
      this.$api.ProductsParams('', 'get', _params).then (result => {
        // console.log(result)
        this.tableProducts.ContentData = result.data
        // 格式化日期，去掉时间
        this.tableProducts.ContentData.forEach((row, index) => {
          row.PublicDate = this.$utils.initDate(row.PublicDate, 0, 10)
        })
        // 关闭加载动画
        this.tableProducts.loading = false
      }).catch (err => {
        switch (err.response.status) {
          case 401:
            this.unauthorized()
            break
        }
        console.log(err)
      })
    },

    // 上传图片
    uploadIMG(files) {
      return this.$utils.uploadedIMG()
    },
    uploadedLogoInfo(info) {
      this.baseInfo.Logo = this.$utils.formatUploadedInfo(info)[0]
    },
    uploadedWeiboQRCodeInfo(info) {
      this.baseInfo.WeiboQRCode = this.$utils.formatUploadedInfo(info)[0]
    },
    uploadedWeixinQRCodeInfo(info) {
      this.baseInfo.WeixinQRCode = this.$utils.formatUploadedInfo(info)[0]
    },

    // 提交编辑
    editMessage(evt) {
      const _editMessageResult = this.$utils.formatFormData(evt)
      // console.log(_editMessageResult)
      this.$api.BaseInfoData('1', 'put', _editMessageResult).then( result => {
        if ( result === 'success') {
          //  重新请求数据列表
          this.getBaseInfo()
          this.$utils.notify('更新成功！', 'positive')
        } else if ( result === 'error' ) {
          this.$utils.notify('数据库操作错误，请联系管理员', 'red-8')
        }
      }).catch( err => {
        switch (err.response.status) {
          case 401:
            this.unauthorized()
            break
        }
        console.log(err)
      })
    },

    // session过期操作
    ...mapMutations(['changeLogin']),
    unauthorized() {
      // 弹出警告框
      this.$utils.notify('身份信息过期','red-8')
      // 清除vuex中的token
      this.changeLogin({ Authorization: '' })
      // 路由跳转
      this.$router.push('/Login', onComplete => {}, onAbort => {});
    }

  },
  mounted() {
    this.getBaseInfo()
    this.getArticlesList()
    this.getProductsList()
  },
}
</script>
<style scoped>
</style>
